<!-- 手机号登陆 -->
<template>
  <div class="loginPhone">
    <header>
      <div>
        <!-- 返回按钮 -->
        <van-button @click="$router.go(-1)"
          ><i class="iconfont icon-navbankicon"></i
        ></van-button>
        <span>手机号登录</span>
      </div>
    </header>
    <section>未注册手机号登录后将自动创建账号</section>
    <div class="phone_ipt">
      <div class="phone_sel">
        <van-button @click="showPrefix">
          {{ phoneNums }}
          <i class="iconfont icon-xiasanjiao"></i>
        </van-button>
      </div>
      <van-field
        v-model="value"
        type="tel"
        clearable
        autofocus
        placeholder="请输入手机号"
        maxlength="11"
        @input="iptPhoneNum"
      />
    </div>
    <van-button
      class="btn"
      type="default"
      color="#fe3a3b"
      round
      block
      @click="nextPage"
      >下一步</van-button
    >
    <phonePrefix v-on:phoneNum="getPhoneNum"></phonePrefix>
    <router-view></router-view>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';
import phonePrefix from "../components/phonePrefix"; //手机号前缀
export default {
  //import引入的组件需要注入到对象中才能使用
  components: { phonePrefix },
  data() {
    //这里存放数据
    return {
      phoneNums: "+86",
      value: "",
    };
  },
  //监听属性 类似于data概念
  computed: {},
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    //vuex,显示手机号前缀选择组件
    showPrefix() {
      this.$store.state.show = new Boolean(true);
    },

    //子组件传过来的手机号前缀
    getPhoneNum(e) {
      this.phoneNums = e;
    },

    //获取输入的数据
    iptPhoneNum(e) {
      console.log(e);
      this.value = e;
    },

    nextPage() {
      let length = this.value.length;
      if (length < 11) {
        console.log("请输入11位数字的手机号");
        this.$toast({
          message: "请输入11位数字的手机号",
          position: "bottom",
        });
      } else {
        this.$router.push({
          name: "LoginPassword",
          params: { phone: this.value },
        });
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.loginPhone {
  width: 343px;
  margin: 0 auto;
  header {
    margin-top: 21px;
    div {
      display: flex;
      align-items: baseline;
      .icon-navbankicon {
        font-size: 18px;
        height: 0px;
      }
      .van-button--normal {
        width: 47px;
        padding: 0;
      }
      .van-button {
        display: flex;
        justify-content: start;
        height: 100%;
        border: none;
        margin-left: 2px;
      }
      span {
        font-size: 16px;
      }
    }
  }
  section {
    color: #919191;
    font-size: 12px;
    margin-top: 46px;
    letter-spacing: 2px;
  }
  .phone_ipt {
    border-bottom: 0.02667rem solid #dfdfdf;
    height: 33px;
    display: flex;
    justify-content: flex-start;
    font-weight: bold;
    color: black;
    margin-top: 33px;
    .phone_sel {
      font-size: 13px;
      width: 56px;
      .van-button--normal {
        padding: 0;
      }
      .van-button {
        height: 100%;
        width: 56px;
        border: none;
      }
      .icon-xiasanjiao {
        font-size: 5px;
      }
    }
    .van-cell {
      padding: 0 0 0 10px;
      line-height: 33px;
      input {
        font-size: 12px;
        caret-color: red;
      }
    }
  }
  .btn {
    margin-top: 36px;
    height: 39px;
  }
}
</style>
